<template>
	<view class="content">
		<Search></Search>
		<Prefernce :preferdata="preferdata"></Prefernce>
		<Title></Title>
		<view @click="getTop" :catchtouchmove="true"><Delicacy id="delicacy" :class="{ active: flag }"></Delicacy></view>
		<view style="height: 50upx;"></view>
		<Takeout :takeshop="takeshop"></Takeout>
		<!-- loading -->
		<loading v-if="loading"></loading>
	</view>
</template>

<script>
//导入子组件
import Search from './components/search.vue';
import Delicacy from './components/delicacy.vue';
import Prefernce from './components/prefernce.vue';
import Takeout from './components/takeout.vue';
import Title from './components/title.vue';

// 导入封装的请求方法
import { listing } from '../../api/api.js';

// 导入请求地址
import { getpreferurl, takeouturl } from '../../api/request.js';

// 导入vuex的mapState
import {mapState} from "vuex"

export default {
	data() {
		return {
			preferdata: [],
			scrolltop: 0,
			delicacyTop: 0,
			flag: false,
			takeshop: [],
			// shopnone:"",
			// loading
			loading:true
		};
	},
	created() {
		this.prefernce();
	},
	// 监听页面滚动距离
	onPageScroll(e) {
		// console.log(e.scrollTop)
		this.scrolltop = e.scrollTop;
	},
	// 监听筛选组件到顶部距离
	onLoad() {
		const query = wx.createSelectorQuery();
		query.select('#delicacy').boundingClientRect();
		query.exec(res => {
			//这里一定要用箭头函数，不然this指向太深，不能找到外面的this
			// console.log(res[0].top)
			this.delicacyTop = res[0].top;
		});
	},
	methods: {
		// 为你优选
		prefernce() {
			// 批量并发请求多个接口，Promise.all=>可以并发请求多个接口，并且得到多个接口的数据

			Promise.all([listing(getpreferurl), listing(takeouturl)])
				.then(res => {
					// 将请求回来的数据给到 为你优选
					this.preferdata = res[0].data;
					// 将请求回来的数据给到 附近商家
					this.takeshop = res[1].data;
					// console.log(res)
					// console.log(this.takeshop)
					// loading取消
					this.loading=false
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 回到顶部
		getTop() {
			wx.pageScrollTo({
				scrollTop: this.delicacyTop + 2,
				duration: 300
			});
		}
	},
	components: {
		Search,
		Delicacy,
		Prefernce,
		Takeout,
		Title
	},
	computed: {
		// ...mapState(['state']),
		// 监听筛选组件是否顶置
		scrollfun() {
			if (this.scrolltop > this.delicacyTop) {
				this.flag = true;
			} else {
				this.flag = false;
			}
		},
		// 筛选来的新的商家数据
		getNewArr() {
			this.takeshop = this.$store.state.screenarr;
			// console.log(this.$store.state.screenarr)
			
			// if(this.$store.state.screenarr=="没有商品数据"){
			// 	this.takeshop = "没有商品数据"
			// 	console.log(this.takeshop)
			// }else{
			// 	this.takeshop = this.$store.state.screenarr;
			// 	console.log(this.takeshop)
			// }
			
		}
	}
};
</script>

<style scoped>
.content {
	margin: 0 15upx;
}
.active {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}
</style>
